<template>
  <div :id="echartId" class="echart-box"></div>
</template>

<script lang="ts" setup>
// 例如：import 《组件名称》 from '《组件路径》';
import {defineComponent, markRaw, onMounted, onUnmounted, reactive, toRefs} from 'vue';
import * as ec from 'echarts';
import icon from '@/assets/image/home/icon.png';

const props = defineProps({
  echartId: {type: String},
  title: {type: String},
  nameTitle: {type: String},
  lineData: {type: Object},
  legendShow: {type: Boolean, default: true},
});
// 这里存放数据
const propData = markRaw(props);
const data: any = reactive({
  myChart: '',
  colorList: [
    '#5f49b0',
    '#7b2fd5',
    '#354cc2',
    '#08926a',
    '#c23d47',
    '#d12987',
    '#e6ad06',
    '#d07022',
  ],
});

const drwaEchart = () => {
  if (data.myChart) ec.dispose(data.myChart);
  const chartDom: any = document.getElementById(propData.echartId);
  data.myChart = markRaw(ec.init(chartDom));
  let markPointListHll = propData.lineData.hllData.map((v, i) => {
    let tempObj = {
      name: "顶部",
      symbolSize: [4, 10],
      // y: "30%",
      // x: "17%",
      // type:'max',
      xAxis: v, //放需要展示图片的x轴索引
      yAxis: i, //y轴对应的值
      symbolOffset: [2, 0], //图片相对于柱形图的偏移量
      symbol: "rect",
      itemStyle: {
        color: "#EFFFFB",
      },
    };
    return tempObj;
  });

  console.log("markPointListHll：",markPointListHll)
  let option = {
    legend: {
      show: propData.legendShow,
      data: ['分月货流量', '分月客流量'],
      right: '0%',
      top: '10%',
      padding: [0, 30, 0, 30],
      textStyle: {
        color: 'rgba(255, 255, 255, 0.80)',
      },
      icon: 'rect',
      //   itemStyle:{
      //     color:'rgba(7, 131, 250, 1)'
      //   },
      itemWidth: 16,
      itemHeight: 6,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
    },
    grid: {
      left: '20%',
      bottom: '10%',
      right: '20%',
      top: '10%',
    },
    yAxis: {
      type: 'category',
      data: propData.lineData.xData,
      axisLine: {
        show: false,
        lineStyle: {
          color: 'rgba(53, 65, 77, 1)',
          width: 1,
        },
      },
      axisLabel: {
        padding: [6, 0, 0, 0],
        // textStyle: {
        //   color: '#595959',
        //   fontSize: '14',
        // },
        textStyle: {
          color: 'rgba(209, 239, 255, 0.65)',
          fontSize: '12',
        },
        interval: 0,
        formatter: function (value) {
          return '{img|}{value|' + value + '}';
        },
        rich: {
          value: {
            fontSize: 14,
            lineHeight: 20,
          },
          //比较麻烦，要给每一张图片都要加一个定义
          img: {
            //引入图片
            backgroundColor: {
              image: icon,
            },
            height: 14,
            width: 14,
            //处理图片的宽高
          },
        },
      },
      axisTick: {
        show: false,
        alignWithLabel: true,
      },
    },
    xAxis: [{
      show: false,
      type: 'value',
      name: propData.title,
      minInterval: 1, // 只显示整数
      splitLine: {
        //网格线
        lineStyle: {
          color: 'rgba(53, 65, 77, 1)',
          type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
        },
        show: true, //隐藏或显示
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.80)',
        },
        textStyle: {
          color: 'rgba(193, 233, 255, 0.8)',
          fontSize: '12',
        },
      },
    },
      {
        type: 'value',
        gridIndex: 0,
        min: 0,
        max: 100,
        splitNumber: 12,
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitArea: {
          show: false,
          areaStyle: {
            color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
          }
        }
      }],
    series: [
      {
        name: propData.nameTitle || '分月货流量',
        showBackground: false,
        // backgroundStyle: {
        //   borderWidth: 16,
        //   borderColor: '',
        //   color: 'rgba(23, 43, 67, 0.3)',
        // },
        data: propData.lineData.hllData,
        type: 'bar',
        label: {
          show: false,
          position: 'right',
          color: '#ffffff',
          formatter: function (e) {
            console.log('value', e);
            return '{value|' + e.value + '}{unit|μg/m}';
          },
          rich: {
            value: {
              fontSize: 18,
              color: '#A0EFFF',
            },
            unit: {
              fontSize: 12,
              color: '#93A9B2',
            },
          },
        },
        itemStyle: {
          color: new ec.graphic.LinearGradient(0, 0, 1, 0, [
            {offset: 1, color: '#4FB3D4'},
            {offset: 0.1, color: '#1177CB'},
          ]),
        },
        barWidth: "20%",
        xAxisIndex: 0,
        yAxisIndex: 0,
        zlevel: 99,
        markPoint: {
          data: markPointListHll,
        },
      },
      {
        name: '背景',
        showBackground: false,
        type: 'bar',
        barWidth: '50%',
        barGap: '-180%',
        xAxisIndex: 1,
        yAxisIndex: 0,
        data: [100, 100, 100, 100],
        itemStyle: {
          normal: {
            color: 'rgba(23, 43, 67, 0.3)'
            // color: '#21ebff'
          }
        },
        label: {
          show: true,
          position: 'right',
          color: '#ffffff',
          formatter: function (e) {
            console.log('value', e);
            return '{value|' +propData.lineData.hllData[e.dataIndex] + '}{unit|  μg/m}';
          },
          rich: {
            value: {
              fontSize: 18,
              color: '#A0EFFF',
            },
            unit: {
              fontSize: 12,
              color: '#93A9B2',
            },
          },
        },
        zlevel: 0,
      },
    ],
  };
  option && data.myChart.setOption(option);
};
onMounted(() => {
  // drwaEchart();
  window.addEventListener('resize', (e) => {
    data.myChart && data.myChart.resize();
  });
});
onUnmounted(() => {
  window.removeEventListener('resize', drwaEchart);
});

defineExpose({
  drwaEchart,
});
</script>

<style lang="less" scoped>
.echart-box {
  height: 200px;
  width: 100%;
}
</style>
